<template>
  <div class="">
    <Box>
      <div slot="box">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="6">
            <div style="width: 100%">
              <a-select v-model="data.type" placeholder="流程类型" style="width: 100%" @change="handleChange1">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="1">
                  案事件任务
                </a-select-option>
                <a-select-option value="2">
                  物资调用
                </a-select-option>
                <a-select-option value="3">
                  启动预案
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div style="width: 100%">
              <a-select v-model="data.processStatus" placeholder="当前审批状态" style="width: 100%" @change="handleChange2">
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option value="2">
                完成
              </a-select-option>
              <a-select-option value="1">
                审批中
              </a-select-option>
              <a-select-option value="3">
                已驳回
              </a-select-option>
              <a-select-option value="4">
                已撤销
              </a-select-option>
            </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <a-button type="primary" @click="querys">查询</a-button>
          </a-col>
        </a-row>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="table"
          :showSelection="false"
          :showPagination="true"
          :customRow="clickCustomRow"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="status" slot-scope="text, record">
            <a-badge color="#87d068" v-if="text == '通过'" status="processing" :text="text" />
            <a-badge color="magenta" v-if="text == '驳回'" status="processing" text="驳回" />
            <a-badge color="geekblue" v-if="text == '待审批'" status="processing" text="待审批" />
            <a-badge color="gold" v-if="text == '已撤销'" status="processing" text="待审批" />
          </template>
        </CustomTable>

      </div>
    </Box>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import Box from '@views/xlgc/Box'
import { getDictItemsFromCache } from '@api/api'
import { getAllList, getAlreadyList, getMineList } from '@api/xlgc/staging'
export default {
  name: 'List',
  components: { CustomTable, Box },
  data() {
    return {
      value: '',
      dateFormat: 'YYYY-MM-DD',
      data: {
        type: undefined,
        processStatus: undefined
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '流程名称',
          dataIndex: 'title',
          scopedSlots: { customRender: 'title' }
        },
        {
          title: '流程类型',
          dataIndex: 'processType',
          scopedSlots: { customRender: 'processType' }
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          scopedSlots: { customRender: 'applicant' }
        },
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          scopedSlots: { customRender: 'applyTime' }
          // customRender: (text,record) => {
          //   //字典值翻译通用方法
          //   return this.filterMultiDictText('cases_level', text)
          // }
        },
        {
          title: '我的审批',
          dataIndex: 'myApply',
          scopedSlots: { customRender: 'myApply' }
        },
        {
          title: '我的审批时间',
          dataIndex: 'myApplyTime',
          scopedSlots: { customRender: 'myApplyTime' }
        },
        {
          title: '当前审批状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '流程当前节点',
          dataIndex: 'processCurrentNode',
          scopedSlots: { customRender: 'processCurrentNode' }
        }
      ],
      pageData: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      table: {}
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
  },

  methods: {
    querys() {
      this.refreshTable(Object.assign({}, this.pageFilter, this.data))
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable(Object.assign({}, this.pageFilter, this.data))
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            console.log(record)
            this.$emit('clickRow', record)
          }
        }
      }
    },

    refreshTable(val) {
      this.loading = true
      getAlreadyList(val)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.table = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },

    onChange1(e) {
      console.log(e.target.value)
      if (e.target.value == '1') {
        this.data.state = ''
      } if (e.target.value == '2') {
        this.data.state = '进行中'
      } if (e.target.value == '3') {
        this.data.state = '已完结'
      }
    },
    onChange(date, dateString) {
      this.data.date = dateString
    },
    handleChange1(val) {
      this.data.type = val
      return val
    },
    handleChange2(val) {
      this.data.processStatus = val
      return val
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>
.gutter-row{
  display: flex;
  align-items: center;
}
</style>
